<template>
  <el-row>
    <el-col :span="20" :offset="2">
      <el-form ref="userForm" :model="userForm" :rules="userRules" label-width="80px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="account">
          <el-input v-model="userForm.account" readonly></el-input>
        </el-form-item>
        <el-form-item label="名 称" prop="nickname">
          <el-input v-model="userForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="邮 箱" prop="email">
          <el-input v-model="userForm.email"></el-input>
        </el-form-item>
        <el-button style="width: 100%" :disabled="buttondDisabled" @click="handleButtonClick(userForm.email)" type="text">{{timeKeepingActive?`${count}s`:'获取验证码'}}</el-button>
        <el-form-item label="验证码" prop="verifyCode">
          <el-input v-model="userForm.verifyCode"></el-input>
        </el-form-item>
        <el-form-item label="电 话" prop="tel">
          <el-input v-model="userForm.tel"></el-input>
        </el-form-item>
        <el-form-item label="头 像 使用外链" prop="userImg">
          <el-input v-model="userForm.userImg"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateUser('userForm')">修改</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>


</template>

<script>
import router from '../router';
import qs from "qs"

export default {
  name: 'User',
  data() {
    return {
      userForm: {
        account: '',
        password: '',
        nickname: '',
        email: '',
        tel: '',
        userImg: '',
        verifyCode: ''
      },
      userRules: {
        account: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }],
        nickname: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        }],
        email: [{
          required: true,
          message: '请输入邮箱',
          trigger: 'blur'
        }],
        tel: [{
          required: true,
          message: '请输入电话',
          trigger: 'blur'
        }],
        userImg: [{
          required: true,
          message: '请输入图片',
          trigger: 'blur'
        }],
        verifyCode: [{
          required: true,
          message: '请输入验证码',
          trigger: 'blur'
        }]
      },
      timeKeepingActive: false,
      count: 0,
      buttondDisabled: false,
      to:'',
      subject:''
    }
  },
  props: {
    seconds: {  //获取验证码按钮的秒数
      type: Number,
      default: 60,
    },
    timeKeeping: {    //计时
      type: Boolean,
      required: true,
    }
  },
  methods: {
    updateUser(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("/moon-service-user/user/update",this.userForm)
            .then(res => {
              console.log(res);

              alert(res)
              if (res === "success"){
                //跳转主页
                location.href='/'
              }
            })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    selectAllUser(){
      this.axios.post("/moon-service-user/user/selectAllById")
        .then(res =>{
          this.userForm.account = res.user.account;
          this.userForm.password = res.user.password;
          this.userForm.nickname = res.user.nickname;
          this.userForm.email = res.user.email;
          this.userForm.tel = res.user.tel;
          this.userForm.userImg = res.user.userImg;
          console.log(this.userForm)
        })
        .catch(error => {
          console.log(error)
        })
    },
    sendEmail(){

    },
    handleButtonClick(r){    //点击时间抛出给父组件
      //this.$emit('getConfirmCodeClick')
      alert("验证码已发送")
      this.to = r
      this.subject = "验证码--用户信息修改"
      this.axios.post("http://127.0.0.1:8085/user/sendEmail",qs.stringify({to: this.to,subject: this.subject}))
        .then(res => {
          if (res === "success") {
            console.log("success")
            location.href='/Login'
          }else {
            console.log("error")
          }
        })
    }

  },
  created() {
    this.selectAllUser();
  },
  watch: {
    timeKeeping: {
      handler(newValue){
        if(newValue === true){    //false变为了true，启动计时器
          this.count = this.seconds    //秒数
          this.buttondDisabled = true    //按钮禁用
          this.timeKeepingActive = true    //界面秒数倒计时界面显示
          let t = setInterval(() => {
            if (this.count <= 0){
              clearTimeout(t)    //时间到了就清除计时器
              this.buttondDisabled = false    //按钮禁用
              this.timeKeepingActive = false    //界面秒数倒计时界面显示
              this.$emit('timeKeepingDone')    //抛出即使完成时间
            }
            this.count--;
          }, 1000)
        }
      }
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.get-confirm-code {
  min-width: 70px;
}
</style>
